<template>
    <!-- 批量属性 -->
    <div>
        <el-form ref="form" :validate-on-rule-change="false" :model="postData"  :rules="rules" class="demo-form-inline" label-width="20%" >

            <el-col v-for="(item,index) in data" :key="index" :span="item.span">
                <template
                v-if="item.type == 'slot'">
                    <slot :name="item.prop" :item="item" />
		        </template>
                
                <div v-if="item.type == 'text'" class="text_label">{{item.label}}</div>

                <el-form-item
                v-if="item.type == 'input'"
                :label-width="'100px'"
                :label="item.label"
                :prop="item.prop">
                    <el-input 
                        v-if="item.textType == 'number'"
                        class="tableInput" 
                        oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                        @blur="blurUnit"
                        v-model.trim="postData[item.prop]" 
                        style="padding:0;width:58%;margin:2px 0 0 8px" 
                        placeholder="请输入">
                    </el-input>

                    <el-input v-else @blur="blurName(postData[item.prop], item.prop)" class="tableInput" v-model="postData[item.prop]" style="padding:0;width:90%;margin:2px 0 0 8px" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item
                v-if="item.type == 'radio'"
                :label-width="'100px'"
                :label="item.label"
                :prop="item.prop">
                    <div style="padding-left:8px">
                         <el-radio class="tableInput" @change="blurUnit(postData[item.prop], item.prop)" style="color:#fff;" v-model="postData[item.prop]" :label='true' >是</el-radio>
                        <el-radio class="tableInput" @change="blurUnit(postData[item.prop], item.prop)" style="color:#fff; " v-model="postData[item.prop]" :label='false'>否</el-radio>
                    </div>
                </el-form-item>

                <el-form-item
                v-if="item.type == 'select'"
                :label="item.label"
                :label-width="'100px'"
                :prop="item.prop">
                    <el-select @visible-change="selectClass" class="tableInput" style="width:93%;padding: 2px 0px 0 8px;" v-model="postData[item.prop]" placeholder="请选择">
                        <el-option
                          v-for="item in optionData[item.prop]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          style="color:#fff;font-size:12px;font-weight: 300;">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                v-if="item.type == 'color'"
                :label="item.label"
                :label-width="'100px'"
                :prop="item.prop">
                    <colorPicker defaultColor="#fff" v-model="postData[item.prop]"  style="margin-left:10px"/>
                    <!-- <el-color-picker
                      v-model="postData[item.prop]"
                      :predefine="predefineColors"
                      style="padding:2px 0 0 8px">
                    </el-color-picker> -->
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    postData: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      default: []
    },
    optionData: { // 下拉数据
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
          option: [
            { label: '亩', value: '0' },
            { label: 'm²', value: '1' },
            { label: '公顷', value: '2' }
          ],
          predefineColors: [
            '#ffffff', '#000', '#8E8E8E', '#EA0000', '#FF359A', '#FF00FF', '#9F35FF', '#6A6AFF', '#2894FF', '#00FFFF',
            '#1AFD9C', '#28FF28', '#9AFF02', '#F9F900', '#F9F900', '#FFA042', '#FF5809', '#B87070', '#AFAF61', '#6FB7B7', '#9999CC', '#B766AD'
          ],
          rules:[],
        }
  },
  computed: {
  },
  watch: {
  },
  mounted() {},
  methods: {
      selectClass(data){
          if(data == true){
              console.log(document.getElementsByClassName('el-popper').classList);
          }
      },
      blurName(e, prop){
          let val = { e:e, prop:prop}
          this.$emit('blurName', val)
      },
    blurUnit(e, prop){
        if(prop == 'layer'){
          //   console.log(this.$refs.cascaderHandle);
            this.$refs.cascaderHandle[0].dropDownVisible = false
        }
        let val = { e:e, prop:prop}
		this.$emit('blurUnit', val)
        this.$forceUpdate()
	},
    focus(e){
    },
    changeUnit(e, prop){
        this.$forceUpdate()
    },
  }
}
</script>


<style>
/* element魔改 */
/* input框 */
.tableInput .el-input__inner{
    background:none !important;
    color: #fff !important;
}
/* 选择框下拉 */
.el-select-dropdown__list{
    padding: 0 !important;
}
.el-select-dropdown__item.selected{
    color:#fff !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background: #1c3b3a !important;
}
/* 单位选择下拉框 */
.unit .el-input__suffix{
   display: none !important;
}
.unit .el-input__inner{
   padding:0 10px !important;
}
.el-popper.unit li{
    padding: 0 5px 0 10px !important;
}
.el-popper.unit{
    min-width: 47px !important;
}
.el-popper{
    margin-top: 0px !important;
    background:rgb(63,72,84, 0.9) !important;
    min-width: 150px !important;
}
/* 选择框下拉的小三角 */
.popper__arrow{
    display: none !important;
}
.el-select-dropdown__item:hover{
    background: #1c3b3a !important;
}
/* radio框 */
.tableInput .el-radio__label{
    font-size: 12px !important;
}
.tableInput .el-radio__input.is-checked + .el-radio__label{
    color: #fff !important;
}
/* 颜色选择器 */
.m-colorPicker .box{
    position: fixed !important;
    background:transparent !important;
    background-color:rgba(63,72,84, 0.9) !important;
    color: #fff !important;
    z-index: 1002 !important;
}
.m-colorPicker h3{
    color: #fff !important;
}
.m-colorPicker div{
    color: #fff !important;
}
.tableInput .el-slider__runway{
    margin-top: 12px !important;
}
/* .el-color-picker__panel{
     background:transparent !important;
     background-color:rgba(63,72,84, 0.9) !important;
     width: 272px !important;
}
.el-color-dropdown__main-wrapper{
    display: none !important;
}
.el-button--text{
    color: #fff !important;
} */
</style>
<style lang="scss" scoped>
    ul{
        padding: 0;
        margin: 0;
    }
    el-form-item{
        font-size: 12px;
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
        // border: 1px solid #ffffff;
        list-style-type:none;
        display: flex;
        justify-content: start;

        div{
            padding: 8px 10px;
        }
        div:nth-child(1){
            width: 91px;
            border-right: 1px solid #ffffff;
        }
    }
    .text_label{
        color:#fff;
        text-align: center;
        margin-bottom: 10px;
        padding: 4px 0;
        background: rgba(32, 160, 255, 0.3);
        
    }
</style>
